<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
		<script src="./lib/three.js"></script>
		<script src="./js/OrbitControls.js"></script>

		<style>
			body {
				margin: 0;
			}

			canvas {
				width: 100%;
				height: 100%;
				display: block;
			}
		</style>
	</head>
	<body>
		<script>
			var scene = new THREE.Scene();
			// 模型
			// var geometry = new THREE.SphereGeometry(60, 40, 40);
			var geometry = new THREE.BoxGeometry(100, 100, 100, 5, 5, 5);
			// geometry.scale(2, 2, 2)

			// var geometry =new THREE.CylinderGeometry(50, 50, 100, 25);
			// var geometry = new THREE.BufferGeometry(100, 100, 100);
			// 			var vertices = new Float32Array([
			// 				0, 0, 0,
			// 				80, 0, 0,
			// 				80, 80, 0,
			// 				0, 80, 0
			// 			]);
			// 			var attribute = new THREE.BufferAttribute(vertices, 3);
			// 			geometry.attributes.position = attribute;
			// 
			// 			// 法向量
			// 			var normals = new Float32Array([
			// 				0, 0, 1,
			// 				0, 0, 1,
			// 				0, 0, 1,
			// 				0, 0, 1
			// 			]);
			// 
			// 
			// 			geometry.attributes.normal = new THREE.BufferAttribute(normals, 3); // 3 points in a group
			// 
			// 			var indexs = new Uint16Array([
			// 				0, 1, 2, 0, 2, 3,
			// 			])
			// 
			// 			geometry.index = new THREE.BufferAttribute(indexs, 1); //  one point in a group
			// 
			var material = new THREE.MeshLambertMaterial({
				color: 0x0000ff,
				side: THREE.DoubleSide,
				wireframe: true
			})
			var mesh = new THREE.Mesh(geometry, material);
			scene.add(mesh);

			// 模型二

			var geometry2 = new THREE.Geometry();

			var p1 = new THREE.Vector3(0, 0, 0);
			var p2 = new THREE.Vector3(0, 100, 0);
			var p3 = new THREE.Vector3(50, 0, 0);
			var p4 = new THREE.Vector3(0, 0, 100);
			geometry2.vertices.push(p1, p2, p3, p4);

			// Face3 创建出一个三角面1
			var face1 = new THREE.Face3(0, 1, 2);

			// 定义法向量
			var n1 = new THREE.Vector3(0, 0, -1);
			var n2 = new THREE.Vector3(0, 0, -1);
			var n3 = new THREE.Vector3(0, 0, -1);

			face1.vertexNormals.push(n1, n2, n3);

			// Face3 创建出一个三角面2
			var face2 = new THREE.Face3(0, 2, 3);
			face2.normal = new THREE.Vector3(0, -1, 0);

			// 三角面 face1 face2 添加到几何体
			geometry2.faces.push(face1, face2);

			var material = new THREE.MeshLambertMaterial({
				side: THREE.DoubleSide,
				color: 0xffff00,
				// vertexColors: THREE.VertexColors
			});
			var mesh = new THREE.Mesh(geometry2, material);
			// scene.add(mesh);

			var targetPoint = new THREE.Object3D();
			targetPoint.position.set(0, -10, -10);
			scene.add(targetPoint);

			// 光照对象
			var point = new THREE.PointLight(0xffffff);
			point.position.set(20, 20, 20);
			scene.add(point);
			// 平行光



			var directionalLight = new THREE.DirectionalLight(0xffffff, 1);
			directionalLight.target = targetPoint;
			scene.add(directionalLight);

			var width = window.innerWidth;
			var height = window.innerHeight;
			var k = width / height;
			var s = 200;
			var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
			camera.position.set(200, 200, 200);
			camera.lookAt(new THREE.Vector3(1000, 0, 0));

			var renderer = new THREE.WebGLRenderer();
			renderer.setSize(width, height);
			renderer.setClearColor(0xb9d3ff, 1);
			document.body.appendChild(renderer.domElement);

			var controls;

			function initControls() {
				controls = new THREE.OrbitControls(camera, renderer.domElement);
				// 如果使用animate方法时，将此函数删除
				// controls.addEventListener( 'change', render );
				// 使动画循环使用时阻尼或自转 意思是否有惯性
				controls.enableDamping = true;
				//动态阻尼系数 就是鼠标拖拽旋转灵敏度
				controls.dampingFactor = 0.25;
				//是否可以缩放
				controls.enableZoom = true;
				//是否自动旋转
				controls.autoRotate = false;

				//设置相机距离原点的最近距离
				controls.minDistance = 50;

				//设置相机距离原点的最远距离
				controls.maxDistance = 2000;
				//是否开启右键拖拽
				controls.enablePan = true;

			}

			initControls();

			var axisHelper = new THREE.AxisHelper(250);
			scene.add(axisHelper);


			function render() {
				renderer.render(scene, camera);
			}


			function animate() {
				//更新控制器

				render();

				controls.update();
				requestAnimationFrame(animate);

			}

			animate();
		</script>
	</body>
</html>
